<template>
  <div>
    <el-dialog :show-close="false" class="dialog" v-model="dialogShow">
      <template #header="{ close }">
        <div class="my-header">
          <h4 class="TopicTitle">题目预览</h4>
          <a href="javascript:;" @click="close"> X </a>
        </div>
      </template>
      <el-row style="margin-bottom: 20px">
        <el-col :span="6"
          >【题型】:
          {{
            props.TeamList?.questionType === '1'
              ? '单选'
              : props.TeamList?.questionType === '2'
              ? '多选'
              : '简答'
          }}</el-col
        >
        <el-col :span="6">【编号】: {{ props.TeamList?.id }}</el-col>
        <el-col :span="6">【难度】: {{ props.TeamList?.difficulty }}</el-col>
        <el-col :span="6">【标签】: {{ props.TeamList?.tags }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】: {{ props.TeamList?.subjectName }}</el-col>
        <el-col :span="6">【目录】: {{ props.TeamList?.directoryName }}</el-col>
        <el-col :span="6">【方向】: {{ props.TeamList?.direction }}</el-col>
      </el-row>
      <el-divider border-style="solid" />
      <p>【题干】:</p>
      <p v-html="props.TeamList?.question"></p>
      <el-radio-group
        class="ml-4"
        v-model="Radio"
        @change="Radio = !Radio"
        v-if="
          props.TeamList?.questionType === '1' ||
          props.TeamList?.questionType === '3'
        "
      >
        <el-radio
          style="width: 100%"
          :label="item.isRight === 0 ? false : true"
          size="large"
          v-for="item in props.TeamList?.options"
          :key="item.id"
          >{{ item.title }}</el-radio
        >
        <br />
      </el-radio-group>
      <div v-if="props.TeamList?.questionType === '2'">
        <div v-for="item in props.TeamList?.options" :key="item.id" style="margin-bottom: 5px;">
          <el-checkbox :checked="item.isRight === 1" :label="item.title" />
        </div>
      </div>
      <el-divider border-style="solid" />
      <p>
        【参考答案】:<el-button @click="videoShow = true" type="danger"
          >视频答案预览</el-button
        >
      </p>
      <video controls width="400" height="300" v-if="videoShow">
        <source :src="props.TeamList?.videoURL" type="video/webm" />
        <source :src="props.TeamList?.videoURL" type="video/mp4" />
        Download the WEBM or MP4 video.
      </video>
      <el-divider border-style="solid" />
      <p>
        【答案解析】: <span>{{ props.TeamList?.answer }}</span>
      </p>
      <el-divider border-style="solid" />
      <p>【题目备注】: {{ props.TeamList?.remarks }}</p>
      <el-row justify="end">
        <el-button type="primary" @click="dialogShow = false"
          >关闭</el-button
        ></el-row
      >
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps(['dialog', 'TeamList'])
const emit = defineEmits(['update:dialog'])

const dialogShow = computed({
  set() {
    // 自身改变的时候向父组件发起请求更改父传子的数据
    emit('update:dialog', false)
  },
  get() {
    return props.dialog
  }
})
const videoShow = ref(false) // 控制视频是否显示
const Radio = ref(true) // 单选框
// 点击关闭, 关闭弹窗
</script>
<style scoped>
:deep(.el-dialog) {
  width: 900px;
  border-radius: 9px;
}
:deep(.el-dialog__header) {
  height: 55px;
  margin-right: 0;
  background-color: #409eff;
  color: #ffffff;
  border-radius: 8px 8px 0px 0px;
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: -5px;
    .TopicTitle {
      margin-top: 2px;
    }
  }
}
</style>
